<%@ page import="dk.fuddi.grails.Earthquake" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="main"/>
  <title>Earthquake List</title>
  <export:resource/>
  <g:javascript src="jquery.flot.min.js"/>
  <g:javascript src="jquery.flot.pie.js"/>
  <g:javascript src="jquery.flot.stack.min.js"/>
</head>
<body>
<div class="nav">
  <span class="menuButton"><a class="home" href="${resource(dir: '')}">Home</a></span>
  <span class="menuButton"><g:link class="create" action="create">New Earthquake</g:link></span>
</div>
<div class="body">
  <h1>Earthquake List (${earthquakeInstanceTotal})</h1>
  <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
  </g:if>
  <div class="list">
    <table>
      <thead>
      <tr>
        <g:sortableColumn property="id" title="Id"/>
        <g:sortableColumn property="lat" title="Lat"/>
        <g:sortableColumn property="lng" title="Lng"/>
        <g:sortableColumn property="magnitude" title="Magnitude"/>
        <g:sortableColumn property="name" title="Name"/>
        <g:sortableColumn property="title" title="Title"/>
        <g:sortableColumn property="updated" title="Updated"/>
      </tr>
      </thead>
      <tbody>
      <g:each in="${earthquakeInstanceList}" status="i" var="earthquakeInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
          <td><g:link action="show" id="${earthquakeInstance.id}">${fieldValue(bean: earthquakeInstance, field: 'id')}</g:link></td>
          <td>${earthquakeInstance.lat}</td>
          <td>${earthquakeInstance.lng}</td>
          <td>${earthquakeInstance.magnitude}</td>
          <td>${fieldValue(bean: earthquakeInstance, field: 'name')}</td>
          <td>${fieldValue(bean: earthquakeInstance, field: 'title')}</td>
          <td><g:toLocalDateTime utcDateTime="${earthquakeInstance.updated}" timeZoneId="${session.myTimeZone ? session.myTimeZone : 'UTC'}"/></td>
        </tr>
      </g:each>
      </tbody>
    </table>
  </div>
  <div class="paginateButtons">
    <g:paginate total="${earthquakeInstanceTotal}"/>
  </div>

  <export:formats formats="['csv', 'excel', 'xml']"/>

  <g:if test="${latestFetchEarthquakes != null}">
    <div class="message">
      Updated
      <g:formatDate date="${latestFetchEarthquakes}"/>
    </div>
  </g:if>

  <div id="select_timezone">
    <g:form>
      <p>Select timezone</p>
      <g:timeZoneSelect name="myTimeZone"/>
      <g:actionSubmit action="changeTimeZone" value="Change TimeZone"/>
    </g:form>
  </div>

  <br/>

  <div id="pieholder" style="width: 600px; height: 400px;"></div>

  <g:javascript>
    var pieGraphHolder = $("#pieholder");
    // Data and option for the pie
    var flotJSONDataList = ${flotJSONDataList};
    var data = [];
    for (var i = 0; i < flotJSONDataList.length; i++) {
      var flotJSONData = flotJSONDataList[i];
      data[i] = { label: flotJSONData.name, data: flotJSONData.percent }
    }

    var pieOptions = {
      series: {
        pie: {
          show: true
        }
      },
      legend: {
        show: false
      },
      grid: {
          clickable: true,
          hoverable: true,
          autoHighlight: true
      }
    };

    jQuery(pieGraphHolder).bind("plotclick", function (event, pos, item) {
        if (item) {
          var form = document.getElementById("sortEarthquakeList");
          form.flotSeriesName.value = item.series.label;
          form.submit();
        }
    });

    $.plot(pieGraphHolder, data, pieOptions);

  </g:javascript>

  <g:form name="sortEarthquakeList" action="list" method="get">
    <input id="flotSeriesName" name="flotSeriesName" type="hidden"/>
  </g:form>

</div>
</body>
</html>
